<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>position/z-index/zoom</title>
	<style type="text/css">
	*{	margin: 0;padding: 0}
	html,body{
		width: 100%;height: 100%;
	}

	.con{ 
		width: 100%;
		height: 4000px;
		background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522328992375&di=ac9125c70783ea622232d808454f332f&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201304%2F28%2F113520wwh0shx86cxwww4p.jpg") center top no-repeat;
	}

	.opacity_{ 
		width: 100%;
		height: 100%;
		background:linear-gradient(red, blue);
		position: fixed;
		left: 0;
		top: 0;
	}

	.login{ 
		width: 360px;
		height: 360px;
		background-color: blue;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-right: -180px;
		margin-top: -180px;
	}

	.nav{ 
		width: 100%;
		height: 8%;
		background-color: black;
		position: fixed;
		top: 0;
		left: 0;
		border: 1px solid red;
	}
	</style>
</head>
<body>
	<div class="con"></div>
	<div class="opacity_"></div>
	<div class="nav"></div>
	<div class="login"></div>
</body>
</html>